<template>
  <live-open-layout>
    <div class="_battle-wrapper" :class="{ _mobile: isMobile }">
      <div class="_battle-search-wrapper">
        <div class="_search-bar">
          <label>Price By</label>
          <el-select
            v-model="params.price_by"
            size="large"
            class="_select-search-bar"
            placeholder="Recommended"
            clearable
            @change="onResetQuery"
          >
            <el-option
              v-for="item in priceBy"
              :key="item.value"
              v-bind="item"
            />
          </el-select>
        </div>
        <el-button
          class="_btn-wrapper"
          size="large"
          type="primary"
          @click="onOpenModal"
        >
          <div class="_create-btn">
            <img class="w-1.25rem" :src="Plus" />
            <span>Create Battle</span>
          </div>
        </el-button>
      </div>
      <battles ref="battleRef" :params="params" :show-size="20" />
    </div>

    <create-battle v-model:open="modalToggleInfo.toggle" />
  </live-open-layout>
</template>

<script lang="tsx" setup>
import Plus from "@/assets/plus.png";
import type { BattlesInstance } from "@/components/Battles/battles";
import Battles from "@/components/Battles/battles.vue";
import { priceBy } from "@/enum/common";
import { useMedia } from "@/hooks/useMedia";
import { useModalToggle } from "@/hooks/useModalToggle";
import LiveOpenLayout from "@/layout/live-open-layout/live-open-layout.vue";

import CreateBattle from "./CreateBattle/createBattle.vue";

const { modalToggleInfo, onOpenModal } = useModalToggle();
const isMobile = useMedia();

const battleRef = ref<BattlesInstance>();
const params = ref<API.Battles.BattleListParams>({
  price_by: void 0,
  page: 1,
  size: 0,
});

function onResetQuery() {
  battleRef.value?.resetQuery();
}
</script>

<style lang="less" scoped>
._battle-wrapper {
  @apply flex flex-col w-full;
  gap: 1.25rem;
  padding: 1.44rem 0;
  ._battle-search-wrapper {
    @apply flex items-center justify-between;
    ._search-bar {
      @apply flex items-center;
      gap: 1rem;
      & > label {
        font-size: 1rem;
        line-height: 1.38rem;
        white-space: nowrap;
      }
      ._select-search-bar {
        width: 18.75rem;
      }
    }

    ._create-btn {
      @apply flex items-center;
      gap: 0.38rem;
      padding: 0 1rem;
      color: 1D1F20;
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.25rem;
      img {
        width: 1.25rem;
      }
    }
  }

  &._mobile {
    padding: 0.94rem;
    ._battle-search-wrapper {
      @apply flex-col-reverse w-full;
      gap: 1.25rem;
      ._search-bar {
        gap: 0.19rem;
        width: 100%;
        & > label {
          width: 5rem;
          font-size: 1.13rem;
        }
        ._select-search-bar {
          flex: 1;
          width: 0;
        }
      }

      ._btn-wrapper {
        width: 100%;
        ._create-btn {
          color: #1d1f20;
          font-size: 1.13rem;
        }
      }
    }
  }
}
</style>
